<!--
 * @Description: 
 * @Date: 2024-04-28 15:58:10
 * @LastEditTime: 2024-05-06 10:23:35
-->
<template>
  <div class="userH5">
    <p class="userH5-title">向代表提报</p>
    <div class="userH5-content">
      <div class="userH5-info">
        <img :src="avatar" />
        <div>
          <p>{{ userName }}</p>
          <p>{{ csName }}</p>
        </div>
      </div>
      <van-form ref="form">
        <van-cell-group>
          <van-cell title="姓名" icon="friends-o" />
          <van-field
            :rules="contentRules"
            v-model="form.name"
            placeholder="请输入姓名"
            required
          >
          </van-field>
        </van-cell-group>
        <van-cell-group>
          <van-cell title="手机号" icon="phone-o" />
          <van-field
            :rules="telRules"
            v-model="form.phone"
            placeholder="请输入手机号"
            required
          >
          </van-field>
        </van-cell-group>
        <van-cell-group>
          <van-cell title="意见标题" icon="coupon-o" />
          <van-field
            :rules="contentRules"
            v-model="form.title"
            placeholder="请输入意见标题"
            required
          >
          </van-field>
        </van-cell-group>
        <van-cell-group @click="showPicker = true">
          <van-cell title="意见类型" icon="setting-o" />
          <van-field
            :rules="selectRules"
            readonly
            is-link
            v-model="form.type"
            placeholder="请选择意见类型"
            @click="showPicker = true"
          />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="详细描述" icon="records-o" />
          <van-field
            :rules="contentRules"
            type="textarea"
            v-model="form.content"
            placeholder="请输入详细描述"
            rows="6"
            autosize
            required
          >
          </van-field>
          <span slot="left-icon">如何获取</span>
        </van-cell-group>
        <van-cell-group>
          <van-cell title="随手拍" icon="cashier-o" />
          <!-- <van-uploader v-model="fileList" multiple :after-read="afterRead" /> -->
          <van-field name="uploader" required :rules="contentRules">
            <template #input>
              <van-uploader v-model="uploader" :after-read="afterRead" />
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
      <div class="user-botton">
        <van-button
          type="info"
          size="middle"
          @click="submit"
          style="width: 200px"
          >提交</van-button
        >
      </div>
    </div>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import { getManageItem } from "@/api/dbxx/dbxxManage";
import autofit from "autofit.js";
import {
  Cell,
  CellGroup,
  Field,
  Picker,
  Popup,
  Uploader,
  Button,
  Form,
  Toast,
} from "vant";
import { getToken } from "@/utils/auth";
import "vant/lib/index.css";
import axios from "axios";
import { listData } from "@/api/system/dict/data";

import { addQuestion } from "@/api/digitization/home/index";
export default {
  name: "userH5",
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Uploader.name]: Uploader,
    [Button.name]: Button,
    [Form.name]: Form,
    [Toast.name]: Toast,
  },
  data() {
    return {
      form: {
        userId: undefined,
        name: undefined,
        phone: undefined,
        title: undefined,
        type: undefined,
        content: undefined,
        file: [],
      },
      columns: [],
      showPicker: false,
      csName: "",
      userName: "",
      avatar: "",
      uploader: [],
      telRules: [
        {
          required: true,
          message: "手机号码不能为空",
          trigger: "onBlur",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
              value
            );
          },
          message: "请输入正确格式的手机号码",
          trigger: "onBlur",
        },
      ],
      contentRules: [
        {
          required: true,
          message: "不能为空",
          trigger: "onBlur",
        },
      ],
      selectRules: [
        {
          required: true,
          message: "不能为空",
          trigger: "onChange",
        },
      ],
    };
  },

  mounted() {
    this.csName = this.$route.query.csName;
    this.form.userId = this.$route.query.id;
    listData({ dictType: "sys_minyi_status" }).then((res) => {
      this.columns = res.rows.map((item) => {
        return {
          text: item.dictLabel,
          value: item.dictValue,
        };
      });
    });
    getManageItem(this.$route.query.id).then((res) => {
      this.userName = res.data.userName;
      this.avatar = process.env.VUE_APP_BASE_API + res.data.avatar;
    });
    autofit.init({
      dh: 667,
      dw: 375,
      el: ".userH5",
      resize: false,
    });
  },
  methods: {
    beforeRead() {},
    afterRead(file, detail) {
      // 此时可以自行将文件上传至服务器
      file.status = "uploading";
      file.message = "上传中...";
      console.log(file, detail);

      //发送请求
      let params = new FormData();
      params.append("file", file.file);
      axios
        .post(
          process.env.VUE_APP_BASE_API + "/system/user/profile/avatar/local",
          params,
          {
            headers: {
              "Content-Type": "application/json",
              Authorization: "Bearer " + getToken() || "",
            },
          }
        )
        .then((res) => {
          this.form.file.push(res.data.data.avatar);

          file.status = "done";
          file.message = "上传成功";
          Toast.success("上传图片成功");
        })
        .catch((err) => {
          file.status = "failed";
          file.message = "上传失败";
          console.error(err);
        });
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onConfirm(value) {
      this.form.type = value.text;
      this.showPicker = false;
    },
    submit() {
      // 全局表单验证
      this.$refs.form
        .validate()
        .then(() => {
          //addQuestion
          addQuestion(this.form)
            .then((res) => {
              this.$toast.success("提交成功");
              // this.$router.push({
              //   path: "/digitization/contact/user",
              // });
            })
            .catch(() => {
              this.$toast.fail("提交失败");
            });
        })
        .catch(() => {
          this.$toast.fail("提交失败");
        });
    },
  },
};
</script>
<style lang="scss">
.userH5 {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f6f4f7;
  .userH5-title {
    text-align: center;
    padding: 10px 0;
    background: #0776fb;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 5px;
  }
  .userH5-content {
    width: 100%;
    padding: 10px;
    overflow: auto;
    flex: 1;
  }
  .van-cell .van-icon {
    color: #0776fb !important;
    font-size: 18px;
  }
  .user-botton {
    width: 100%;
    height: 40px;
    position: sticky;
    bottom: 0;
    text-align: center;
  }
  .userH5-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    background-image: url("../../../assets/images/digitzation/h5bg.png");
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      object-fit: cover;
      margin-right: 20px;
    }
    p {
      font-size: 14px;
      color: #fff;
      margin-bottom: 5px;
    }
  }
  .van-cell-group {
    margin-bottom: 10px;
  }
  .van-cell,
  .van-cell--required,
  .van-field__value,
  .van-field__body {
    overflow: hidden;
  }
}
</style>
